<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>二维码生成小工具</title>
  <style>
    html {
      width: 100%;
      height: 100%;
      background: url('./assets/bg.png') 0 0 no-repeat;
      background-size: 100% 100%;
      overflow: hidden;
      font-family: Microsoft Yahei;
      font-size: 16px;
    }

    body {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
      moz-user-select: -moz-none;
      -moz-user-select: none;
      -o-user-select: none;
      -khtml-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .intro {
      width: 60%;
      height: 30%;
      display: flex;
    }

    .intro .left {
      position: relative;
      width: 90px;
      height: 90px;
      background-color: #fff;
      border-radius: 5px;
    }

    .intro .left img {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 80px;
      height: 80px;
      transform: translate(-50%, -50%);
    }

    .intro .add {
      flex: 1;
      margin-left: 20px;
    }

    .intro .add .title {
      font-size: 30px;
    }

    .intro .choosefile {
      display: inline-block;
      position: relative;
      color: #fff;
      width: 100px;
      margin-top: 20px;
      margin-right: 10px;
      text-align: center;
      line-height: 30px;
      border: 1px solid #ddd;
      border-radius: 5px;
    }

    .choosefile input {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
    }

    .pro_tip {
      font-size: 20px;
      line-height: 2em;
    }

    .progressBar {
      position: relative;
      width: 60%;
      background-color: #fff;
      height: 15px;
      border-radius: 20px;
      overflow: hidden;
    }

    .progressBar div {
      position: absolute;
      left: 0;
      top: 0;
      background-color: #31d884;
      height: 100%;
      border-radius: 20;
      width: 0%;
      transition: all .1s;
    }

    .progressBar div.error {
      background-color: red;
    }

    .generate {
      background-color: #31d884;
      color: #fff;
      width: 15%;
      height: 40px;
      border: none;
      border-radius: 5px;
      margin-top: 50px;
      cursor: pointer;
      text-align: center;
      line-height: 40px;
    }

    .generate.disabled {
      background-color: #ddd;
    }

    .titleBar {
      position: fixed;
      top: 0px;
      right: 0px;
      opacity: .6;
      overflow: hidden;
    }

    .titleBar button {
      background-color: rgba(0, 0, 0, .5);
      width: 50px;
      height: 34px;
      float: left;
      border: none;
      outline: none;
      -webkit-app-region: no-drag;
    }

    .titleBar button img {
      width: 100%;
      height: 100%;
    }

    .titleBar:hover {
      opacity: .8;
    }

    .titleBar .small:hover {
      background-color: rgba(0, 0, 0, .8)
    }

    .titleBar .big:hover {
      background-color: rgba(0, 0, 0, .8)
    }

    .titleBar .close:hover {
      background-color: red;
    }

    .no_drag {
      -webkit-app-region: no-drag;
    }

    .progress10 {
      width: 10%;
    }

    .progress20 {
      width: 20%;
    }

    .progress30 {
      width: 30%;
    }

    .progress40 {
      width: 40%;
    }

    .progress60 {
      width: 50%;
    }

    .progress70 {
      width: 60%;
    }

    .progress80 {
      width: 70%;
    }

    .progress90 {
      width: 80%;
    }
  </style>
</head>

<body style="-webkit-app-region: drag">
  <div class="titleBar" id="titleBar">
    <button class="small">
      <img id="small" src="./assets/-.png" alt="">
    </button>
    <button class="big">
      <img id="big" src="./assets/rectangle.png" alt="">
    </button>
    <button class="close">
      <img id="close" src="./assets/x.png" alt="">
    </button>
  </div>
  <div class="intro">
    <div class="left">
      <img class="folder" src="./assets/folder.png" alt="">
    </div>
    <div class="add">
      <div class="title">二维码批量生成工具</div>
      <span id="filename"></span>
      <span class="choosefile">选择文件
        <input class="no_drag" id="chooseFile" type="file" accept="text/plain">
      </span>
    </div>
  </div>
  <div id="progressTip" class="pro_tip">生成进度</div>
  <div class="progressBar">
    <div id="innerbar"></div>
  </div>
  <div id="generate" class="generate no_drag">生成</div>
  <script>
    // modules
    const {
      ipcRenderer: ipc
    } = require('electron');
    const Qrcode = require('./qrcode.js');
    let qrcode = new Qrcode({
      type: 'png',
      size: 5
    }); // 实例化

    // dom 对象
    var fileBtn = document.getElementById('chooseFile');
    var filename = document.getElementById('filename');
    var generateBtn = document.getElementById('generate');
    var innerbar = document.getElementById('innerbar');
    var progressTip = document.getElementById('progressTip');
    var titleBar = document.getElementById('titleBar');

    // 初始化参数
    var filepath = '';
    var progressArr = [];



    // 事件绑定
    fileBtn.addEventListener('change', function (e) {
      var file = e.target.files[0];
      filename.innerText = file.path;
      filepath = file.path;
    }, false)

    generateBtn.addEventListener('click', function () {
      if (!filepath) {
        alert('请选择文件');
        return;
      }
      if (hasClass(generateBtn, 'disabled')) {
        return;
      }
      for (var i = 0; i < 10; i++) {
        progressArr.push((Math.random() * 100).toFixed(0));
      }
      progressArr = progressArr.sort((a, b) => a - b);
      addClass(generateBtn, 'disabled')
      removeClass(innerbar, 'error')
      innerbar.style.width = '0%';
      progressTip.innerText = '生成进度';
      generateBtn.innerText = '生成中...';
      var key = 0; // 标示位
      qrcode.generate(filepath, {
        padding: function (res) {
          var percent = ((res.currentIndex / res.total) * 100).toFixed(0);
          switch (percent) {
            case '10':
              if (key != percent) {
                console.log(key)
                key = percent;
                innerbar.className = 'progress' + percent;
              }
              break;
            case '20':
              if (key != percent) {
                console.log(key)
                key = percent;
                innerbar.className = 'progress' + percent;
              }
              break;
            case '30':
              if (key != percent) {
                console.log(key)
                key = percent;
                innerbar.className = 'progress' + percent;
              }
              break;
            case '40':
              if (key != percent) {
                console.log(key)
                key = percent;
                innerbar.className = 'progress' + percent;
              }
              break;
            case '50':
              if (key != percent) {
                console.log(key)
                key = percent;
                innerbar.className = 'progress' + percent;
              }
              break;
            case '60':
              if (key != percent) {
                console.log(key)
                key = percent;
                innerbar.className = 'progress' + percent;
              }
              break;
            case '70':
              if (key != percent) {
                console.log(key)
                key = percent;
                innerbar.className = 'progress' + percent;
              }
              break;
            case '80':
              if (key != percent) {
                console.log(key)
                key = percent;
                innerbar.className = 'progress' + percent;
              }
              break;
            case '90':
              if (key != percent) {
                console.log(key)
                key = percent;
                innerbar.className = 'progress' + percent;
              }
              break;
          }
          // innerbar.style.width = percent + '%';
          // progressTip.innerText = '生成进度：' + res.currentIndex + '/' + res.total;
        },
        success: function (res) {
          removeClass(generateBtn, 'disabled');
          generateBtn.innerText = '生成完毕';
          fileBtn.value = '';
          filepath = '';
          filename.innerText = '';
          innerbar.style.width = '100%';
          progressTip.innerText = '生成';
        },
        error: function (err) {
          removeClass(generateBtn, 'disabled');
          generateBtn.innerText = '生成出错';
          fileBtn.value = '';
          filepath = '';
          filename.innerText = '';
          // addClass(innerbar, 'error');
          progressTip.innerText = '生成出错，请联系技术人员';
          console.log(err)
        }
      });
    }, false)

    titleBar.addEventListener('click', function (e) {
      var targetId = e.target.getAttribute('id');
      switch (targetId) {
        case 'small':
          ipc.send('min')
          break;
        case 'big':
          ipc.send('max')
          break;
        case 'close':
          ipc.send('close')
          break;
      }
    }, false)

    // dom元素操作方法
    function hasClass(elements, cName) {
      return !!elements.className.match(new RegExp("(\\s|^)" + cName + "(\\s|$)"));
    };

    function addClass(elements, cName) {
      if (!hasClass(elements, cName)) {
        elements.className += " " + cName;
      };
    };

    function removeClass(elements, cName) {
      if (hasClass(elements, cName)) {
        elements.className = elements.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), " ");
      };
    };
  </script>
</body>

</html>